<template>
  <div class="order-box">
    <s-header :title="'我的订单'" :back="'/user'"></s-header>
    <van-tabs
      @change="onChangeTab"
      :color="'#1cacac'"
      :title-active-color="'#1cacac'"
      class="order-tab"
      v-model="status"
    >
      <van-tab title="全部" name=""></van-tab>
      <van-tab title="待付款" name="0"></van-tab>
      <van-tab title="待确认" name="1"></van-tab>
      <van-tab title="待发货" name="2"></van-tab>
      <van-tab title="已发货" name="3"></van-tab>
      <van-tab title="交易完成" name="4"></van-tab>
    </van-tabs>
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      class="order-list-refresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        @offset="300"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          class="order-item-box"
          @click="goTO(item.order_data.order_id)"
        >
          <div class="order-item-header">
            <span>订单时间：{{ changeTime(item.order_data.create_time) }}</span>
            <span>{{ item.order_data.pay_menthod }}</span>
          </div>
          <van-card
            :key="item.order_data.order_id"
            :num="item.goods_data[0].goods_count"
            :price="`${item.goods_data[0].price}.00`"
            desc="超级浴霸三摄 支持5GHZ 超大电池4800毫安时"
            :title="item.goods_data[0].good_name"
            :thumb="item.goods_data[0].image"
          ></van-card>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script lang="ts">
import { Toast } from "vant";
import { defineComponent, reactive, toRefs, toRaw } from "vue";
import { useRouter } from "vue-router";
import sHeader from "../components/SimpleHeader.vue";

interface data {
  status: string;
  loading: boolean;
  finished: boolean;
  refreshing: boolean;
  list: data_list[];
}
interface data_list {
  goods_data: {
    good_name: string;
    goods_count: number;
    image: string;
    price: number;
  }[];
  order_data: {
    create_time: string;
    delivery_method: string;
    order_id: string;
    status: string;
  };
}
import { orderAll, orderOther } from "../service/order";
export default defineComponent({
  name: "order",
  components: { sHeader },
  setup() {
    // 路由器
    const router = useRouter();
    //静态初始数据
    const data: data = reactive({
      status: "",
      loading: false,
      finished: false,
      refreshing: false,
      list: [],
    });

    // 暂时模拟异步获取数据
    const loadData = async () => {
      // 获取订单列表
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      if (data.status !== "") {
        // 通过orderOther来获取状态0-4
        const currentData = await orderOther(Number(data.status));
        data.list = currentData.data.reverse();
        Toast.clear();
      } else {
        // 获取全部的商品状态
        let currentData = await orderAll();
        data.list = currentData.data.reverse();
        Toast.clear();
        console.log(currentData);
      }
      // console.log(data.list, "@@",typeof Number(data.status));
      data.loading = false;
    };

    // 检测表单变化->初始化刷新
    const onChangeTab = async (name: string, title: string) => {
      data.status = name;
      onRefresh();
    };

    // 当下拉刷新时执行此函数
    const onRefresh = () => {
      data.refreshing = true;
      data.finished = false;
      data.loading = true;
      onLoad();
    };

    // 从下拉重新获取数据
    const onLoad = () => {
      // 加载更多
      if (data.refreshing) {
        data.list = [];
        data.refreshing = false;
      }
      if (!data.refreshing) data.finished = true;
      loadData();
    };

    // 路由跳转到当前商品的详情页面
    const goTO = (id: number) => {
      if (data.status === "") {
        const arr = data.list.filter(
          (item) => item.order_data.order_id == String(id)
        );
        data.status = arr[0].order_data.status;
        // console.log(data.status);
      }
      router.push(`order-detail?id=${id}&status=${data.status}`);
    };

    // 转换时间格式
    const changeTime = (timec: string) => {
      let time = new Date(timec);
      let year = time.getFullYear();
      let mounth = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let mins = time.getMinutes();
      let sec = time.getSeconds();
      return `${year}-${mounth}-${date} ${hours}:${mins}:${sec}`;
    };

    return {
      ...toRefs(data),
      onChangeTab,
      onRefresh,
      onLoad,
      goTO,
      changeTime,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../common/style/mixin.less";
.order-box {
  .ordeer-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    .fj();
    .wh(100%,44px);
    line-height: 44px;
    padding: 0 10px;
    .boxSizing();
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;
    .onder-name {
      font-size: 14px;
    }
  }
  .order-tab {
    margin-top: 44px;
    position: fixed;
    left: 0;
    z-index: 1000;
    width: 100%;
  }
  .order-list-refresh {
    margin-top: 68px;
    .van-card_content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .van-pull-refresh_head {
      background: #f9f9f9;
    }
    .van-list {
      min-height: calc(100vh - 88px);
      background: #f9f9f9;
      margin-top: 20px;
    }
    .order-item-box {
      margin: 20px 10px;
      background: #fff;
      .order-item-header {
        padding: 10px 20px 0 20px;
        display: flex;
        justify-content: space-between;
        span {
          font-size: 14px;
        }
      }
      .van-card {
        background-color: #fff;
        margin-top: 0;
      }
    }
  }
}
</style>